<template>
  <el-card>
    <template #header>
      <div style="display: flex;gap:10px;">
        <el-button v-loading="translationStore.loading" size="default" type="primary" @click="handleTranslate">{{ $t('message.common.translate') }}</el-button>
        <el-button v-loading="translationStore.loading" size="default" type="primary" @click="handleTranslateAndApply">{{ $t('message.common.TranslateAndApply') }}</el-button>
        <el-select style="width: 150px;" size="default" v-model="translationStore.from" :placeholder="$t('message.common.from')">
          <el-option label="自动检测" value="auto"></el-option>
          <el-option label="中文" value="zh"></el-option>
          <el-option label="英语" value="en"></el-option>
          <el-option label="日语" value="jp"></el-option>
          <el-option label="韩语" value="kor"></el-option>
          <el-option label="法语" value="fra"></el-option>
          <el-option label="西班牙语" value="spa"></el-option>
          <el-option label="俄语" value="ru"></el-option>
          <el-option label="德语" value="de"></el-option>
          <el-option label="葡萄牙语" value="pt"></el-option>
          <el-option label="意大利语" value="it"></el-option>
          <el-option label="阿拉伯语" value="ara"></el-option>
          <el-option label="荷兰语" value="nl"></el-option>
          <el-option label="波兰语" value="pl"></el-option>
          <el-option label="丹麦语" value="dan"></el-option>
          <el-option label="芬兰语" value="fin"></el-option>
        </el-select>
        <el-select style="width: 150px;" size="default" v-model="translationStore.to" :placeholder="$t('message.common.to')">
          <el-option label="中文" value="zh"></el-option>
          <el-option label="英语" value="en"></el-option>
          <el-option label="日语" value="jp"></el-option>
          <el-option label="韩语" value="kor"></el-option>
          <el-option label="法语" value="fra"></el-option>
          <el-option label="西班牙语" value="spa"></el-option>
          <el-option label="俄语" value="ru"></el-option>
          <el-option label="德语" value="de"></el-option>
          <el-option label="葡萄牙语" value="pt"></el-option>
          <el-option label="意大利语" value="it"></el-option>
          <el-option label="阿拉伯语" value="ara"></el-option>
          <el-option label="荷兰语" value="nl"></el-option>
          <el-option label="波兰语" value="pl"></el-option>
          <el-option label="丹麦语" value="dan"></el-option>
          <el-option label="芬兰语" value="fin"></el-option>
        </el-select>
      </div>
    </template>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-input v-model="translate" type="textarea" :autosize="{ minRows: 5, maxRows: 8 }"></el-input>
      </el-col>
      <el-col :span="12">
          <el-text >{{ translationStore.translation }}</el-text>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import { useGenerationStore } from '@renderer/stores/useGenerationStore';
import { useTranslationStore } from '@renderer/stores/useTranslationStore';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
const translationStore = useTranslationStore();
const generationStore = useGenerationStore()
const translate = ref("")
const handleTranslate = ()=>{
  const text = translate.value;
  if(text){
    translationStore.translateTextDebounced(text);
  }
  else{
    ElMessage.error("文本不能为空")
  }
}

const handleTranslateAndApply = ()=>{
  const text = translate.value;
  if(text){
    translationStore.translateTextFromTo(text,'auto','en').then(res=>{
      if(res){
        generationStore.params.prompt += "," + res;
      }
    })
  }
  else{
    ElMessage.error("文本不能为空")
  }
}
</script>
